<!-- 个人信息设置 -->
<template>
  <div class="setting-container">
    <van-nav-bar title="地址列表" left-arrow @click-left="onClickLeft" />
    <van-address-list
      v-model="chosenAddressId"
      :show-add-button="false"
      :list="addressList"
      default-tag-text="默认"
      @edit="onEdit"
    />

    <van-popup
      v-model:show="isPupAddress"
      position="bottom"
      closeable
      :style="{ height: '60%' }"
    >
      <van-nav-bar :title="isType == 1 ? '新增地址' : '编辑地址'" />
      <van-address-edit
        :area-list="areaList"
        show-set-default
        show-search-result
        :search-result="searchResult"
        :area-columns-placeholder="['请选择', '请选择', '请选择']"
        @save="onSave"
        @change-detail="onChangeDetail"
      />
    </van-popup>
    <div class="footer-address">
      <div class="show-add-button footer-box">
        <van-button round type="primary" @click="onAdd">新增</van-button>
        <van-button round type="primary"  @click="onDel">删除</van-button>
      </div>
    </div>
  </div>
</template>
<script setup>
import { computed, reactive, toRefs, ref, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { showConfirmDialog, Toast, showToast } from "vant";
import { areaList } from "@vant/area-data";
const route = useRoute();
const router = useRouter();
const state = reactive({
  addressList: [
    {
      id: "1",
      name: "张三",
      tel: "13000000000",
      address: "浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室",
      isDefault: true,
    },
    {
      id: "2",
      name: "李四",
      tel: "1310000000",
      address: "浙江省杭州市拱墅区莫干山路 50 号",
    },
  ],
});

let isPupAddress = ref(false);

let { addressList } = toRefs(state);

const onClickLeft = () => {
  router.go(-1);
};

let chosenAddressId = ref("1");
let isType = ref("1");

const onAdd = () => {
  isType.value = "1";
  isPupAddress.value = true;
};

const onDel = () => {
  console.log('删除地址')
}

const onEdit = (item, index) => {
  isType.value = "2";
  isPupAddress.value = true;
};

// let areaList = ref([]);
let searchResult = ref([]);

const onSave = (item) => {
  console.log(item, "item");
};
const onChangeDetail = (val) => {
  console.log(val, "val");
};

onMounted(() => {});
</script>



<style lang="scss" scoped>
input {
  border: none;
  text-align: right;
}
.user-avater {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 50px 0;
  p {
    text-align: center;
    color: #666;
  }
}
.field-main {
  padding: 20px 0;
}
.footer-bottom-btn {
  position: fixed;
  bottom: 80px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  .van-button {
    background: #fafafa;
    border: none;
  }
}
.setting-container {
  background: #f2f2f2;
  min-height: 100vh;
}
.footer-address {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 10px 5px;
  background: #fff;

  .show-add-button {
    display: flex;
    justify-content: center;
  }
  .van-button {
    background: $default-color;
    border: none;
    color: #fff;
    margin: 0 5px;
    width: 100%;
    box-sizing: border-box;
  }
}
</style>
